<template>
  <div class="total">
    <div class="order_total commont">
      <div class="title">
        <h3>工单统计</h3>
        <span>{{this.timeInfo.start.replace(/-/g,'.')}} ~ {{this.timeInfo.end.replace(/-/g,'.')}}</span>
      </div>
      <div class="content">
        <li>
          <h3>{{ cancelTotal.total }}</h3>
          <p>工单总数（个）</p>
        </li>
        <li>
          <h3>{{ cancelTotal.completedTotal }}</h3>
          <p>完成工单（个）</p>
        </li>
        <li>
          <h3>{{ cancelTotal.workerCount }}</h3>
          <p>进行工单（个）</p>
        </li>
        <li>
          <h3>{{ cancelTotal.cancelTotal }}</h3>
          <p>取消工单（个）</p>
        </li>
      </div>
    </div>
    <div class="sale_total commont">
      <div class="title">
        <h3>销售统计</h3>
        <span>{{this.timeInfo.start.replace(/-/g,'.')}} ~ {{this.timeInfo.end.replace(/-/g,'.')}}</span>
      </div>
      <div class="content">
        <li>
          <h3>{{saleTotalList[0]}}</h3>
          <p>订单量（个）</p>
        </li>
        <li>
          <h3>{{(saleTotalList[1]/10000).toFixed(2)==='NaN'?0:(saleTotalList[1]/10000).toFixed(2)}}</h3>
          <p>销售额（万元）</p>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentDay, getMonth } from '@/plugins/formatDate.js'
export default {
  name: 'OrderTotal',
  props: {
    // 工单统计
    taskReportInfoList: {
      type: Array,
      default: () => []
    },
    // 销售统计
    saleTotalList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 定义存放工单统计的对象
      taskReportInfo: {
        cancelTotal: 0,
        completedTotal: 0,
        total: 0,
        workerCount: 0
      },
      // 时间
      timeInfo: {
        start: getMonth(),
        end: getCurrentDay()
      }
    }
  },

  computed: {
    cancelTotal() {
      // 计算总的数量
      this.taskReportInfoList.forEach((item) => {
        this.taskReportInfo.cancelTotal += item.cancelTotal
        this.taskReportInfo.completedTotal += item.completedTotal
        this.taskReportInfo.total += item.total
        this.taskReportInfo.workerCount += item.workerCount
      })
      return this.taskReportInfo
    }
  }
}
</script>

<style lang="less" scoped>
.total {
  display: flex;
  .commont {
    height: 166px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgb(240, 239, 239);
    .title {
      display: flex;
      align-items: center;
      min-width: 300px;
      h3 {
        font-size: 16px;
        color: #333;
      }
      span {
        color: #999;
        font-size: 12px;
        margin-left: 10px;
        height: 20px;
        line-height: 25px;
      }
    }
    .content {
      display: flex;
      justify-content: space-around;
      li {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        min-width: 100px;
        h3 {
          font-size: 36px;
          font-weight: 600;
        }
        p {
          margin-top: 7px;
          font-size: 12px;
        }
      }
    }
  }
  .order_total {
    flex: 4;
    background: #e9f3ff;
    background-image: url('~@/assets/images/task.png'), url('~@/assets/images/task2.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
    .content {
      li {
        h3 {
          color: #072074;
          text-shadow: 2px 4px 7px rgba(85, 132, 255, .5);
        }
        p {
          color: #91a7dc;
        }
      }
    }
  }
  .sale_total {
    flex: 3;
    width: 100%;
    margin-left: 20px;
    background: #fbefe8 url('~@/assets/images/pig.png') no-repeat calc(100% - 12px) 100%;
    .content {
      li {
        h3 {
          color: #ff5757;
          text-shadow: 2px 4px 7px rgba(255, 99, 85,.5 );
        }
        p {
          color: #de9690;
        }
      }
    }
  }
}
</style>
